<template>
	<div class="login-warp">
		<div class="login-form">
			<img class="leftImg" src="../../../static/images/loginBg2.jpg" />
			<div class="righBox">
				<span class="righBox-title">代理商管理平台</span>
				<el-form :model="formName" :rules="rules" ref="formName">
					<el-form-item prop="username" @keyup.enter.native="submitForm('formName')">
						<el-input placeholder="请输入手机号" v-model="formName.username" clearable>
						</el-input>
					</el-form-item>
					<el-form-item prop="password" @keyup.enter.native="submitForm('formName')">
						<el-input placeholder="请输入登录密码" type="password" v-model="formName.password">
						</el-input>
					</el-form-item>
					<el-button type="primary" :loading="isSubmitLoad" @click="submitForm('formName')">登录</el-button>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	import loginApi from '../../api/loginApi'
	export default {
		data() {
			//用户ID验证
			var validateUersId = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('用户ID不能为空'));
				} else {
					callback();
				}
			};
			//用户密码验证
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				formName: {
					username: '',
					password: '',
				},
				//用户ID验证规则
				rules: {
					username: [{
						validator: validateUersId,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}]
				},
				isSubmitLoad: false
			}
		},
		computed: mapState([
			'appConfig',
		]),

		methods: {
			...mapActions(['setConfig']),
			//用户信息验证
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.login()
					} else {
						return false;
					}
				});

			},
			//登录接口
			login: function() {
				if(this.isSubmitLoad) {
					return false;
				}
				this.isSubmitLoad = true;
				let pars = {
					account: this.formName.username,
					password: this.formName.password,
				}
				loginApi.agentLogin(pars, (res) => {
					//					res = JSON.parse(res);
					if(res.code == 0) {
						//定义信息缓存
						var pz = Object.assign({}, this.appConfig);
						pz.appId = res.data.appId;
						pz.serviceRate = res.data.serviceRate;
						pz.withdrawalLines = res.data.withdrawalLines;
						pz.poundage = res.data.poundage;
						this.setConfig(pz);
						this.$router.push({
							path: '/payList'
						});
//						this.$router.replace({
//							path: "/payList"
//						});
					} else if(res.code == 1018) {
						this.$message.error('账号或者密码错误,请重新输入');
					} else if(res.code == 1021) {
						this.$message.error('该账户已禁用');
					}else{
						this.$message.error('网络错误,请重新提交');
					}
					this.isSubmitLoad = false;
				});
			},
		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},

		mounted() {
			
		}
	}
</script>

<style lang="scss">
	html {
		height: 100%;
	}
	
	.login-warp {
		width: 100%;
		height: 100%;
		background-image: url(../../../static/images/loginBg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		left: 0;
		.login-form {
			margin: 0 auto;
			width: 844px;
			height: 430px;
			background: #FFFFFF;
			border-radius: 10px;
			transform: translate(-50%, -50%);
			position: absolute;
			left: 50%;
			top: 50%;
			.leftImg {
				display: inline-block;
				width: 300px;
				height: 234px;
				padding: 98px 50px;
			}
			.righBox {
				display: inline-block;
				width: 48%;
				vertical-align: top;
				margin-top: 74px;
				text-align: center;
				/*margin-left: 20px;*/
				.righBox-title {
					display: block;
					margin-bottom: 52px;
					font-family: 'MicrosoftYaHei';
					font-size: 32px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
				.el-input {
					/*margin-bottom: 20px;*/
					width: 380px;
					height: 48px;
					.el-input__inner {
						width: 380px;
						height: 48px;
						line-height: 48px;
						font-size: 14px;
					}
					.el-input__suffix {
						height: 48px;
						line-height: 36px;
						top: -3px;
					}
				}
				.el-form {
					.el-form-item {
						.el-form-item__error {
							left: 12px
						}
					}
				}
				input::-webkit-input-placeholder {
					/* WebKit, Blink, Edge */
					color: #757575;
					font-family: 'MicrosoftYaHei';
				}
				input:-moz-placeholder {
					/* Mozilla Firefox 4 to 18 */
					color: #757575;
					font-family: 'MicrosoftYaHei';
				}
				input::-moz-placeholder {
					/* Mozilla Firefox 19+ */
					color: #757575;
					font-family: 'MicrosoftYaHei';
				}
				input:-ms-input-placeholder {
					/* Internet Explorer 10-11 */
					color: #757575;
					font-family: 'MicrosoftYaHei';
				}
				.el-button {
					width: 380px;
					height: 48px;
					font-size: 18px;
					font-family: 'MicrosoftYaHei';
					border-radius: 24px;
				}
				.el-button--primary {
					background-color: #458BEF;
				}
				.el-button--primary:focus,
				.el-button--primary:hover {
					background: #66b1ff;
					border-color: #66b1ff;
					color: #fff;
				}
			}
		}
	}
</style>